<template>
    <div class="register">
        <a-form-model class="form-wrapper" layout="horizontal" :model="form" labelAlign="left" :labelCol="{span:6}" :rules="rules" ref="form">
            <a-form-model-item prop="accountNumber">
                <a-input size="large" v-model="form.accountNumber" placeholder="请输入账号" @focus="onFocusKeyBoard">
                  <a-icon slot="prefix" type="user" style="color:rgb(8,133,119)" />
                </a-input>
            </a-form-model-item>
            <a-form-model-item  prop="password">
                <a-input size="large" v-model="form.password" type="password" placeholder="请输入密码" @focus="onFocusKeyBoard">
                  <a-icon slot="prefix" type="lock" style="color:rgb(8,133,119)" />
                </a-input>
            </a-form-model-item>
            <a-form-model-item>
                <a-button size="large" block type="primary" @click="login" style="backgroundColor:rgb(0,200,168)">
                    登录
                </a-button>
            </a-form-model-item>
        </a-form-model>
    </div>
</template>

<script>
import {login} from '../../api/server';
import keyboard from '../../mixins/keyboard'
export default {
  name:"Register",
  mixins:[keyboard],
  data(){
    return {
      rules:{
        accountNumber:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
          //{ min: 3, max: 5, message: '用户名3-5个字符', trigger: 'blur' },
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          //{ min: 6, max: 12, message: '用户名6-12个字符', trigger: 'blur' },
        ]
      },
      form:{
        accountNumber:'',
        password:''
      },
      canFocus:true,
    }
  },
  methods:{
    login(){
      this.$refs.form.validate(valid => {
        if (valid) {
          const factoryId=this.$store.getters["getFactoryId"];
          const param=Object.assign({
            factoryId
          },this.form);
          login(param).then(data =>{
            this.$store.commit('setLoginInfo',data);
            this.$router.push({
              name:"home-sign"
            });
          });
            
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.register{
    width: 100%;
    height: calc(100% - 45);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: column nowrap;
    
    .form-wrapper{
        width: 50%;
        margin-top: calc(((100vh / 2) - 40px - 45px - 200px) / 2);
        ::v-deep{
          .ant-input{
            background-color: rgb(77,77,76);
            color: white;
          }
        }
    }
}
</style>